import React from 'react'
import { connect } from 'react-redux'
import './LayoutScroll.scss'



const mapStateToProps = (state) => { // 配置需要接收的数据
  // console.log(state);
  return {
    showTab: state.layout.showTab,
    tabWidth: state.layout.tabWidth,
    scrollTop: state.layout.scrollTop,
    loading: state.loading.effects['layout/asyncSetLayout'] // 指定异步加载调用的方法路径放在数组中
  };
}

const connector = connect(mapStateToProps)  // 调用connect包裹

class LayoutScroll extends React.Component{

    componentDidMount() {
        const add = document.getElementsByClassName('LayoutScroll')[0]
        console.log(add);
        add.addEventListener('scroll', this.onScroll)
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.onScroll)
    }

    asyncSetLayout = (data) => {
        const { dispatch } = this.props;
        //  console.log( dispatch, data);
        dispatch({
          type: 'layout/asyncSetLayout',
          payload: {
            ...data
          }
        })
      }
    
  onScroll = (event) => {
    const { scrollTop, showTab } = this.props;
    const add = document.getElementsByClassName('LayoutScroll')[0]
    if (showTab === 'add') return false;
    let newscrollTop = add.scrollTop;  //滚动条滚动高度
    // console.log(newscrollTop);
    if (scrollTop < newscrollTop && newscrollTop > 100) {
      this.asyncSetLayout({
        showTab: 'hidden',
        tabWidth: '0%',
        scrollTop: newscrollTop
      })
    } else {
      this.asyncSetLayout({
        showTab: 'show',
        tabWidth: '90%',
        scrollTop: newscrollTop
      })
    }

  }


    render(){
        return (
            <div className='LayoutScroll'>
                {this.props.children}
            </div>
        )
    }
}


export default connector(LayoutScroll)
